<script setup lang="ts">
import { requiredCheck, validDomian } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData } from "@/api/modules/control-strategy/domain-black-list";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增域名黑名单",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import { randomId } from "@/utils";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    domain: [...requiredCheck("请输入域名"), { validator: validDomian }]
  },
  defaultData: {}
});

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      name: randomId(),
      state: "1",
      loc_url: "",
      action: "1",
      type: "1",
      hosts: updateFormData.domain,
      id: updateFormData?.id ? updateFormData?.id.replace("/", "") : undefined
    }
  });
  emits("success");
}
</script>

<template>
  <div
    class="update-form mg-r-sm"
    style="display: inline-block"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.id
      })
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="400px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="" prop="domain">
            <el-input style="width: 260px" placeholder="请输入 " v-model="updateFormData.domain" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  margin-left: 70px !important;
}
</style>
